<script setup>
import { reactive, ref, computed, onMounted, watch } from 'vue';
import SmtHeader from '@/layout/SmtHeader.vue';
import SmtFooter from '@/layout/SmtFooter.vue';
import { useRouter, useRoute } from 'vue-router';
import {
  AddressView,
  InfomationView,
  MailView,
  MineView,
  PcbView,
  BomView,
  SmtView,
  SettingView,
  RefundView,
} from './TabViews';
import { getUserInfo } from '@/server/api/auth.js';
import { getCompanyInfo } from '@/server/api/biz.js';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const route = useRoute();
//  侧边栏菜单
const menuList = reactive([
  {
    title: 'use.OrderManagement',
    name: 'order',
    children: [
      {
        title: 'use.SMTOrder',
        name: 'smt',
        component: SmtView,
      },
      {
        title: 'use.PCBOrder',
        name: 'pcb',
        component: PcbView,
      },
      {
        title: 'mall.bom_preparation',
        name: 'boom',
        component: BomView,
      },
      {
        title: 'mall.refund_records',
        name: 'refund',
        component: RefundView,
      },
    ],
  },
  // {
  //   title: 'use.Privatestock',
  //   name: 'stock',
  //   children: [
  //     {
  //       title: 'use.Privateinventorymanagement',
  //       name: 'mine',
  //       component: MineView,
  //     },
  //     {
  //       title: 'use.MailingComponents',
  //       name: 'mail',
  //       component: MailView,
  //     },
  //   ],
  // },
  {
    title: 'use.AccountInformation',
    name: 'account',
    children: [
      {
        title: 'use.MyProfile',
        name: 'information',
        component: InfomationView,
      },
      {
        title: 'use.ShippingAddress',
        name: 'address',
        component: AddressView,
      },
      {
        title: 'use.Securitysettings',
        name: 'setting',
        component: SettingView,
      },
    ],
  },
]);

// const type = route.query.type;
// const tab = route.query.tabs || 0;
// // const currentParam = router.currentRoute.value.params.paramName;
// const activeItem = ref(menuList[type].children[tab]); //  当前菜单项
const userInfo = reactive({});
const customerInformation = ref({});
let activeItem = ref();
const getRuoterInfo = () => {
  const type = route.query.type;
  const tab = route.query.tabs || 0;
  activeItem.value = menuList[type].children[tab];
  console.log('activeItem', activeItem);
};
getRuoterInfo();
onMounted(() => {
  initActiveMenu();
  userDataExists();
});

/**
 * 判断用户信息是否存在
 */
const userDataExists = () => {
  const userInfos = JSON.parse(localStorage.getItem('userInfo')) || '';
  const token = JSON.parse(localStorage.getItem('loginIfo'))?.accessToken || '';
  if (!userInfos && token) {
    getUserInfoData();
  } else {
    userInfo.nickName = userInfos.nickName ? userInfos.nickName : '游客';
    userInfo.avatar = `${import.meta.env.VITE_APP_FILE_DOWNLOAD_API}/${userInfos.avatar}`;
    userInfo.crmCustomerVO = userInfos.crmCustomerVO;
    customerInformation.value = userInfos;
    // getProfile();
  }
};

/**
 * 获取用户信息
 */
const getUserInfoData = () => {
  getUserInfo().then((res) => {
    if (res.code === 200) {
      if (res.data) {
        userInfo.nickName = res.data.nickName ? res.data.nickName : '游客';
        userInfo.avatar = `${import.meta.env.VITE_APP_FILE_DOWNLOAD_API}/${res.data.avatar}`;
        userInfo.crmCustomerBO = res.data.crmCustomerBO;
        customerInformation.value = res.data;
      }
      window.localStorage.setItem('userInfo', JSON.stringify(res.data));
    }
  });
};

// 菜单栏默认展开
const expandList = computed(() => menuList.map((item) => item.name));

// 初始化菜单
const initActiveMenu = () => {
  // 默认选择当前菜单
  const activeName = route.query.name;
  if (activeName) {
    // 从菜单列表中匹配选中的项目
    const activeItem = menuList
      .map((item) => item.children)
      .flat()
      .find((child) => child.name == activeName);
    if (activeItem) {
      activeItem.value = activeItem;
    }
  }
};
// 切换菜单
const onChangemenu = (child) => {
  activeItem.value = child;
};

const handleChange = (val) => {
  console.log('val', val);
};

const resetData = ref(null);
const onChangeLang = () => {
  console.log(activeItem.value, '点击了');
};
</script>
<template>
  <!-- 头部 -->
  <smt-header @lang-change="onChangeLang"></smt-header>
  <div class="wrapper">
    <div class="container">
      <div class="content">
        <div class="left-container">
          <!-- 个人信息 -->
          <div class="user-info-container">
            <div class="avatar-box">
              <img :src="userInfo.avatar" alt="" class="avatar" />
            </div>
            <div class="user-info-wrap">
              <p class="nick-name">{{ $t('coommon.Nicknames') }}:{{ userInfo.nickName }}</p>
              <p class="member-level">{{ $t('coommon.MembershipLevel') }}：普通会员</p>
            </div>
          </div>
          <!-- 侧边栏菜单 -->
          <el-collapse v-model="expandList" class="menu" @change="handleChange">
            <el-collapse-item
              v-for="item in menuList"
              :key="item.name"
              :title="$t(item.title)"
              :name="item.name"
            >
              <div class="menu-item-container">
                <div
                  class="menu-item"
                  :class="{ active: child.name === activeItem.name }"
                  v-for="(child, idx) in item.children"
                  :key="idx"
                  @click="onChangemenu(child)"
                >
                  {{ $t(child.title) }}
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="right-container">
          <h2 class="page-title">{{ $t(activeItem.title) }}</h2>
          <component
            ref="resetData"
            :is="activeItem.component"
            :userInfo="customerInformation"
            :getUserInfoData="getUserInfoData"
            @getRuoterInfo="getRuoterInfo"
          />
        </div>
      </div>
    </div>
  </div>
  <!-- 底部 -->
  <smt-footer></smt-footer>
</template>
<style lang="scss" scoped>
.wrapper {
  padding: 20px 0 20px;
  background: #f5f5f5;
  .container {
    width: 1440px;
    margin: 0 auto;
  }
  .content {
    display: flex;

    .left-container {
      width: 240px;
      min-height: 456px;
      border-radius: 8px;
      opacity: 1;
      background: #ffffff;

      //   个人信息
      .user-info-container {
        display: flex;
        align-items: center;
        height: 94px;
        padding: 0 16px;
        .avatar-box {
          width: 46px;
          height: 46px;
          background: #5255fe;
          border-radius: 50%;
          img {
            width: inherit;
            height: inherit;
            object-fit: cover;
            border-radius: 50%;
          }
        }

        .user-info-wrap {
          padding-left: 12px;
          color: #383838;
          font-size: 14px;
          .nick-name {
            padding-bottom: 4px;
          }
        }
      }

      .menu {
        &-item-container {
          padding: 16px 0;
        }
        &-item {
          padding-left: 40px;
          padding-bottom: 12px;
          color: #383838;
          font-size: 14px;
          &.active {
            color: var(--mall-color-primary);
            font-weight: 500;
          }
          &:hover {
            color: var(--mall-color-primary);
            font-weight: 500;
            cursor: pointer;
          }
          &:last-child {
            padding-bottom: 0;
          }
        }
      }
    }
    .right-container {
      flex: 1;
      min-height: 456px;
      margin-left: 12px;
      padding: 24px 32px 72px;
      border-radius: 8px;
      background: #fff;
      border-bottom: 1px solid #f5f5f5;
      width: 1000px;
      .page-title {
        padding-bottom: 12px;
        color: var(--mall-text-color-primary);
        font-size: 20px;
        font-weight: 700;
      }
    }
  }
}

::v-deep .el-collapse {
  &-item {
    &__header {
      --el-collapse-header-height: 46px;
      padding-left: 16px;
      color: #383838;
      font-size: 16px;
      font-weight: 500;
      border-bottom: 1px solid #f5f5f5;
    }
    &__content {
      padding-bottom: 0;
    }
  }
}
</style>
